<template>
	<view class="box">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head"
			:style="'padding-top:'+statusBarHeight1+'px;padding-right:'+ (WXwidth + 15) +'px;height:' + (statusBarHeight1 + 44) + 'px'">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="head"
				:style="'padding-top:'+(statusBarHeight1+10)+'px;height:' + (statusBarHeight1 + 54) + 'px'">
				<!-- #endif -->
				<image class="fanhui" @click="fanhui"
					src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/zp_04.png" mode=""></image>
				<view style="font-size: 36rpx;font-size: 500;" v-if="index=='进行中'">
					{{aboutData.activityTitle}}
				</view>
				<view class="fanhui"></view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view :style="'padding-top:'+statusBarHeight1+'px;height:' + (statusBarHeight1 + 44) + 'px'"></view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view :style="'padding-top:'+statusBarHeight1+'px;height:' + (statusBarHeight1 + 54) + 'px'"></view>
			<!-- #endif -->
			<!-- 开始的活动 -->
			<view class="assignment" v-if="index=='进行中'">
				<view class="progress">
					<view class="title">
						我的活动进度
					</view>
					<view class="progressBar" v-if='aboutData.activityProgressBar'>
						<u-line-progress :percentage="aboutData.activityProgressBar.split('%')[0]" height='20' activeColor="#A4FDF0" inactiveColor='#1C6A74'>
						</u-line-progress>
					</view>
					<view class="standard" v-if="aboutData.complianceStatus =='已达标'">
						已达标
					</view>
					<view class="standard" v-else>
						还差{{aboutData.difference}}帮帮豆就能达标了
					</view>
					<view class="cumulative">
						<span>累计获取帮帮豆</span>
						<span>{{aboutData.accumulatedGuildBeansObtained}}</span>
					</view>
				</view>
				<view class="iteam">
					<view class="task-li flex" v-for="(item, index) in aboutData.merberRuleDTOS" :key="item.id">
						<view class="task-left flex">
							<image src="https://pic.bangbangtongcheng.com/static/gzh01.png" mode=""></image>
							<view class="task-desc">
								<view class="task-title">{{item.title}}</view>
								<view class="task-dot">+{{item.integral}}帮帮豆</view>
							</view>
						</view>
						<view class="task-right flex">
							<view class="task-btn finish" v-if="item.completedTimes == item.num"> {{taskName[item.number - 1].finish}} </view>
							<view class="task-btn" v-else @click="goFinish(item.number)">{{taskName[item.number - 1].noFinish}}</view>
							<!-- <view class="task-num">{{item.completedTimes}}/{{item.num}}次</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="activityTime" v-if="index=='进行中'">
				*活动时间：{{aboutData.startTime}}——{{aboutData.endTime}}
			</view>
			<!-- 未开始的活动 -->
			<view class="activeBeforeStart" v-if="index!='进行中'">
				<image class="image" src="../static/bg.jpg" mode="aspectFill"></image>
				<view class="title">
					{{aboutData.activityTitle}}
				</view>
				<view class="beginMinute">
					{{aboutData.activityStatus}}
				</view>
				<view class="cumulative">
					<span>累计获取帮帮豆</span>
					<span>{{aboutData.accumulatedGuildBeansObtained}}</span>
				</view>
				<view class="description">
					<view class="description_title">
						活动描述
					</view>
					<view class="description_text" v-if="aboutData.activityDescription">
						<!-- #ifdef APP-PLUS -->
						<rich-text :nodes="aboutData.activityDescription"></rich-text>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<rich-text :nodes="aboutData.activityDescription"></rich-text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
      			<mp-html :content="aboutData.activityDescription"></mp-html>
						<!-- #endif -->
					</view>
				</view>
			</view>

			<!-- 礼品列表 -->
			<view class="giftList">
				<view class="title">
					礼品列表
				</view>
				<view class="center">
					<span style="margin-bottom: 6rpx;">完成活动任务/达标即可选取精美礼品一份！</span>
					<span>数量有限，先到先得！</span>
				</view>
				<view class="gift">
					<view class="iteam" v-for="(item,index) in aboutData.eventGifts" v-if="item.id" @click="Gifts(item)" :key="index">
						<image class="image" :src="item.giftPicture" mode=""></image>
						<view class="span">
							{{item.giftName}}
						</view>
						<view class="lable" v-if = "giftChage == 1 || aboutData.complianceStatus != '已达标'" style="background-color: #C4C4C4;">
							{{item.redemptionStatus == '已兑换'?'已兑换':'兑换'}}
						</view>
						<view class="lable" v-else style="background-color:skyblue;" @click.stop="exchange(item)">
							{{item.redemptionStatus == '已兑换'?'已兑换':'兑换'}}
						</view>
					</view>
				</view>
			</view>
			<view class="giftList"  v-if="index=='进行中'">
				<view class="title">
					活动规则
				</view>
				<view class="center" v-if="aboutData.activityRules">
					<!-- #ifdef APP-PLUS -->
					<rich-text :nodes="aboutData.activityRules"></rich-text>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<rich-text :nodes="aboutData.activityRules"></rich-text>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<mp-html :content="aboutData.activityDescription"></mp-html>
					<!-- #endif -->
				</view>
			</view>
			<view class="fabuZbc" v-if="fabuZbc" @touchmove.stop.prevent="">
			  <view class="fabuZbc_sj">
			  	<template v-if="userInfo.businessType==1">
			  		<view class="fzView" v-if="userInfo.shopType!=2">
			  			<image src="https://pic.bangbangtongcheng.com/static/fabu_c.png" @click="fabuClick(1)" />
			  			<p>卖房</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.shopType!=2 ">
			  			<image src="https://pic.bangbangtongcheng.com/static/fabu_z.png" @click="fabuClick(2)" />
			  			<p>租房</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop == '1'">
			  			<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png" @click="fabuClick(11)" />
			  			<p>招全职</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop == '1'">
			  			<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png" @click="fabuClick(12)" />
			  			<p>招兼职</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '1'">
			  			<image src="/static/2house-info.png" @click="fabuClick(3)" />
			  			<p>公司资料</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '2'">
			  			<image src="/static/2house-info.png" @click="fabuClick(5)" />
			  			<p>楼盘轮播</p>
			  		</view>
			  	</template>
			  	<template v-else-if="userInfo.businessType==2">
			  		<view class="fzView" v-if="userInfo.shopType==1 || userInfo.shopType==2">
			  			<image src="/static/mc01.png" @click="fabuClick(9)" />
			  			<p>卖车</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.shopType==3 || userInfo.shopType==4">
			  			<image src="/static/fwxm01.png" @click="fabuClick(8)" />
			  			<p>服务项目</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop==1&& userInfo.shopType!=3 && userInfo.shopType!=4">
			  			<image src="/static/zscx01.png" @click="fabuClick(10)" />
			  			<p>在售车系</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop == '1'">
			  			<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png" @click="fabuClick(11)" />
			  			<p>招全职</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop == '1'">
			  			<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png" @click="fabuClick(12)" />
			  			<p>招兼职</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.isShop == 1">
			  			<image src="/static/2house-info.png" @click="fabuClick(3)" />
			  			<p>公司资料</p>
			  		</view>
			  	</template>
			  	<template v-else>
			  		<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
			  			<image src="https://pic.bangbangtongcheng.com/static/fabu_c.png" @click="fabuClick(1)" />
			  			<p>卖房</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
			  			<image src="https://pic.bangbangtongcheng.com/static/fabu_z.png" @click="fabuClick(2)" />
			  			<p>租房</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
			  			<image src="/static/mc01.png" @click="fabuClick(9)" />
			  			<p>卖车</p>
			  		</view>
			  		<view class="fzView">
			  			<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png" @click="fabuClick(11)" />
			  			<p>招全职</p>
			  		</view>
			  		<view class="fzView">
			  			<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png" @click="fabuClick(12)" />
			  			<p>招兼职</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
			  			<image src="https://pic.bangbangtongcheng.com/static/bbzc/writeResume.png" @click="fabuClick(13)" />
			  			<p>写简历</p>
			  		</view>
			  		<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus == 1">
			  			<image src="/static/2house-info.png" @click="fabuClick(3)" />
			  			<p>公司资料</p>
			  		</view>
			  	</template>
			  	<view class="show" @click="fabu_guan">
			  		<image style="width: 100%; height: 100%" src="https://pic.bangbangtongcheng.com/static/guanbi.png">
			  		</image>
			  	</view>
			  </view>
			</view>
			<uni-popup ref="binds" mode="center">
				<view class="binds_frame">
					<view class="binds_frame_t">确认兑换</view>
					<view class="binds_frame_c">{{LiPing.giftName}}</view>
					<view class="binds_frame_b">
						<view class="cancel" @click="jcbdCancel">取消</view>
						<view class="determine" @click="confirmReceipt">确认</view>
					</view>
				</view>
			</uni-popup>
			<uniBall></uniBall>
		</view>
</template>
<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	//#ifdef H5
	import wxshare from "@/utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync("Pduser"),
				WXwidth: "",
				taskList: [],
				totalIntegral: '',
				id:'',
				index: '',
				taskName: [{
						noFinish: "去关注",
						finish: "已关注",
					},
					{
						noFinish: "去完善",
						finish: "已完善",
					},
					{
						noFinish: "去完成",
						finish: "已完成",
					},
					{
						noFinish: "去发布",
						finish: "已发布",
					},
					{
						noFinish: "去完成",
						finish: "已完成",
					},
					{
						noFinish: "去完成",
						finish: "已完成",
					},
					{
						noFinish: "去发布",
						finish: "去发布",
					},
				],
				aboutData:{},
				LiPing:{},
				giftChage:0,
				fabuZbc:false,
			};
		},
		onLoad(options) {
			var than = this;
			// #ifdef MP-WEIXIN
			// 获取胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let getWindowInfo = uni.getWindowInfo().screenWidth
			this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width);
			// #endif
			if(options.id){
				this.id = options.id
				this.index = options.index
			}
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		onShow() {
			this.eventDetails()
		},
		methods: {
			tips(){
				if(this.aboutData.activityProgressBar == 100){
					uni.showToast({
						title: '已兑换礼品，敬请关注下次活动！',
						icon: "none",
						mask: true,
					});
				}else{
					uni.showToast({
						title: '您的任务还未完成，无法兑换！',
						icon: "none",
						mask: true,
					});
				}
			},
			// 获取活动详情
			eventDetails(){
				this.$myRequest.get("/api/mobile/public/getActivityCenterDetails",{
					id:this.id,
					userId:this.userInfo.id
				}).then(res => {
					// 判断是否有已兑换的商品
					if(res.activityCenterDetails.eventGifts.length){
						res.activityCenterDetails.eventGifts.forEach(v=>{
							if(v.redemptionStatus == '已兑换'){
								this.giftChage = 1
							}
						})
					}
					this.aboutData = res.activityCenterDetails
					console.log(this.aboutData,9090)
				})
			},
			exchange(item){
				if(this.index != '进行中'){
					return
				}
				this.LiPing = item
				this.$refs.binds.open()
			},
			jcbdCancel(){
				this.$refs.binds.close()
			},
			async confirmReceipt(){
				// 判断礼品以何种方式发放
				let index =''
				// 商家礼品存档id
				let id = ''
				this.aboutData.eventMerchantGifts.forEach(v=>{
					if(v.giftId == this.LiPing.id){
						// 1为扫码领取，2为邮寄
						index = v.collectionMethod
					}
				})
				let obj ={}
				obj = {
					userId:this.userInfo.id,
					giftId:this.LiPing.id,
					giftName:this.LiPing.giftName,
					giftImage:this.LiPing.giftPicture,
					activityName:this.aboutData.activityTitle,
					exchangeMethod:index,
				}
				/* 旧逻辑有误，只能使用一种领取方式，暂时改成2种方式皆可领取，但是后续是否产生问题未知，刚接手这个项目,然后旧版领取方式1 调用了giftKeep()方法，因为调用这个方法，直接会把状态更改为已兑换，所以注释，以后看需求调整 */
				// console.log(index);
				// if(index == 1){
				// 	// id = await this.giftKeep(obj)
				// 	uni.navigateTo({
				// 		url: "/pages_my/exchangeMethod?giftId=" + this.LiPing.id + '&id='+id
				// 	})
				// }else {
				// 	uni.setStorageSync('yjlp_key', obj);
				// 	uni.navigateTo({
				// 		url: "/pages_my/exchangeMethod"
				// 	})
				// }
				console.log(obj,"阿松大")
				uni.setStorageSync('yjlp_key', obj);
				uni.navigateTo({
					url: "/pages_my/exchangeMethod"
				})
				
				this.jcbdCancel()
			},
			Gifts(item){
				// 判断礼品以何种方式发放
				let index =''
				// 商家礼品存档id
				let id = ''
				console.log(item,this.aboutData.eventMerchantGifts)
				this.aboutData.eventMerchantGifts.forEach(v=>{
					if(v.giftId == item.id){
						// 1为扫码领取，2为邮寄
						index = v.collectionMethod
					}
				})
				let obj ={}
				obj = {
					userId:this.userInfo.id,
					giftId:item.id,
					giftName:item.giftName,
					activityName:this.aboutData.activityTitle,
					giftImage:item.giftPicture,// 对接口发现参数名似乎有变，
					exchangeMethod:index,
				}
				uni.setStorageSync('gift_key', obj);
				uni.navigateTo({
					url: "/pages_recruitMoney/my/giftDetails?giftId=" + item.id  +"&progress=" + this.aboutData.activityProgressBar +'&giftChage=' + this.giftChage
				})
			},
			// 商家礼品存档
			async giftKeep(obj){
				let index =''
				await this.$myRequest.post("/api/mobile/public/addExchangeRecords",obj).then(res => {
					index = res.ExchangeRecordsId
				})
				return index
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 去完成
			goFinish(val) {
				console.log(val)
				if (val == 1) {
					// #ifdef H5
					window.location.href = this.wxUrl;
					// #endif
					// #ifdef MP-WEIXIN
					let wxUrl = "https://www.bangbangtongcheng.com/conven/login/Wxlogin.do?userId=" + this.userInfo.id;
					uni.navigateTo({
						url: "/pages_my/webview?wxUrl="+ encodeURIComponent(wxUrl)
					})
					// #endif
					// #ifdef APP-PLUS
					let wxUrl = "https://www.bangbangtongcheng.com/conven/login/Wxlogin.do?userId=" + this.userInfo.id;
					plus.share.getServices(function(res) {
						var sweixin = null;
						for (var i = 0; i < res.length; i++) {
							var t = res[i];
							if (t.id == 'weixin') {
								sweixin = t;
							}
						}
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: 'gh_c8b17811efca', //这里写你的小程序原始id（以gh开头）
								type: 0, //这里是不同的环境（默认0）
								path: `/pages_my/webview?wxUrl=${encodeURIComponent(wxUrl)}` //这里是指定页的路径，如需传参直接字符串拼接（首页可以省略）
							});
						}
					}, function(res) {
					});
					// #endif
				} else if (val == 2) {
					uni.navigateTo({
						url: "./changeInfo"
					})
				} else if (val == 3) {
					uni.switchTab({
						url:"/pages/index/index"
					})
				} else if (val == 4) {
					this.fabuZbc = true;
				} else if (val == 5) {
					uni.switchTab({
						url:"/pages/index/index"
					})
				}else if (val == 6) {
					uni.switchTab({
						url:"/pages/index/friendsCircle"
					})
				}else if (val == 7) {
					uni.navigateTo({
						url: "/pages_owner/release/releaseFriends"
					})
				}
			},
			fabu_guan() {
			  this.fabuZbc = false;
			},
			fabuClick(num) {
				if (!this.userInfo.phone) {
					uni.showToast({
						title: "请登录",
						icon: "none",
						mask: true,
					});
					return;
				}
			
				if (num == 1) {
					uni.navigateTo({
						url: "/pages_houses/housing/salesType",
					});
					// uni.navigateTo({
					// 	url: "/pages_release/index",
					// });
				} else if (num == 2) {
					// uni.navigateTo({
					// 	url: "/pages_release/tenement",
					// });
					uni.navigateTo({
						url: "/pages_houses/housing/salesType?fromType="+'tenement',
					});
				} else if (num == 3) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=1",
					});
				} else if (num == 4) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=2",
					});
				} else if (num == 5) {
					if(!this.userInfo.buildingsId){
						uni.showToast({
							title: '该商家还未发布楼盘！',
							icon: "none",
							mask: true
						});
						return
					}
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=3",
					});
				} else if (num == 6) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=4",
					});
				} else if (num == 7) {
					uni.navigateTo({
						url: "/pages_owner/release/releaseFriends",
					});
				} else if (num == 8) {
					uni.navigateTo({
						url: "/pages_owner/release/servicesAvailable",
					});
				} else if (num == 9) {
					uni.navigateTo({
						url: "/pages_owner/release/sellCar",
					});
				} else if (num == 10) {
					uni.navigateTo({
						url: "/pages_owner/release/saleCarSeries",
					});
				}else if (num == 11) {
					uni.navigateTo({
						url: "/pages_recruitMoney/publish/publishFullTime",
					});
				}else if (num == 12) {
					if(this.userInfo.businessType == 0&& this.userInfo.enterpriseRecruitmentStatus == 0){
					// businessType = 0&& enterpriseRecruitmentStatus == 0为普通用户，businessType = 0 && enterpriseRecruitmentStatus == 1为企业
						 this.$myRequest
						 	.get("/api/mobile/personnelOwner/getPersonalAuthenticationByUserId", {
						 		userId: this.userInfo.id,
						 	})
						 	.then((res) => {
						 		if(res.code === 200){
						 			if(res.personalCertification && (res.personalCertification.auditStatus === '0' ||res.personalCertification.auditStatus === '2')){
						 				uni.navigateTo({
						 					url: "/pages_recruitMoney/my/certificationInformation"
						 				});
						 			}else{
						 				uni.navigateTo({
						 					url: "/pages_recruitMoney/publish/publishConcurrently",
						 				});
						 			}
						 		}
						 	});
						
					}else{
						uni.navigateTo({
							url: "/pages_recruitMoney/publish/publishConcurrently",
						});
					}
				}else if (num == 13) {
					uni.navigateTo({
						url: "/pages_recruitMoney/publish/writeResume",
					});
				}
				this.fabuZbc = false;
			},
		},
		computed: {
			...mapGetters(["userid", "islogin", "statusBarHeight1", "userinfo"])
		}
	};
</script>
<style lang="less" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
	}

	/deep/ .u-line-progress__text {
		color: #1C6A74;
	}

	.flex {
		display: flex;
	}
	
	.fabuZbc {
	  position: fixed;
	  width: 100%;
	  top: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.7);
	  display: flex;
	  justify-content: center;
		// flex-wrap: wrap;
	  z-index: 999999999;
	  .fabuZbc_sj{
	  	width: 100%;
	  	position: absolute;
	  	top: 40%;
	  	left: 0;
	  	display: flex;
	  	justify-content: center;
	  	flex-wrap: wrap;
	  	.fzView{
	  		width: 25%;
	  		text-align: center;
	  		margin-top: 20rpx;
	  		image {
	  			width: 120rpx;
	  			height: 120rpx;
	  		}
	  		
	  		p {
	  			width: 100%;
	  			font-size: 35rpx;
	  			color: #fff;
	  			text-align: center;
	  			margin-top: 24rpx;
	  			white-space: nowrap;
	  		}
	  	}
	  	.show {
	  		position: absolute;
	  		width: 58rpx;
	  		height: 58rpx;
	  		left: 50%;
	  		transform: translateX(-50%);
	  		bottom: -100rpx;
	  	}
	  }
	}
	
	.head {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		background-color: #fff;
		z-index: 1000;

		.fanhui {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.assignment {
		width: 670rpx;
		margin: 0 40rpx;
		margin-top: 30rpx;
		border-radius: 30rpx;
		overflow: hidden;
	
	.progress {
			height: 288rpx;
			background-image: url('https://pic.bangbangtongcheng.com/static/moveAbout.png');
			background-size: 100%;
			background-repeat: no-repeat;
			padding-top: 28rpx;

			.title {
				margin-bottom: 30rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.progressBar {
				width: 580rpx;
				margin: 0 45rpx;
			}

			.standard {
				margin: 18rpx 0;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}

			.cumulative {
				padding: 0 25rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.iteam {
			padding: 0 25rpx;
			border: 1px solid #707070;
			border-radius:0 0 30rpx 30rpx;
			border-top:none;
			.task-li {
				align-items: center;
				padding: 30rpx 0 24rpx 0;
				box-sizing: border-box;
				border-bottom: 1px solid #D6D6D6;
				justify-content: space-between;

				.task-left {
					align-items: center;

					image {
						width: 66rpx;
						height: 66rpx;
						margin: 0 28rpx 0 0;
					}

					.task-desc {
						.task-title {
							width: 360rpx;
							font-size: 32rpx;
							color: #333333;
						}

						.task-dot {
							font-size: 26rpx;
							color: #A3AAB0;
						}
					}
				}

				.task-right {
					flex-direction: column;
					align-items: center;

					.task-btn {
						padding: 12rpx 36rpx;
						font-size: 26rpx;
						color: #FFFFFF;
						background: #64B6A8;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
					}

					.finish {
						background: #fff;
						border: 1rpx solid #A3AAB0;
						color: #A3AAB0;
					}
				}
			}
		}
	}

	.activityTime {
		margin: 0 40rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-top: 20rpx;
	}

	.giftList {
		padding: 0 40rpx;
		margin-top: 40rpx;

		.title {
			font-size: 30rpx;
			font-weight: 550;
			color: #333333;
			margin-bottom: 6rpx;
		}

		.center {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
		}

		.gift {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.iteam {
				width: 300rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 50rpx;

				.image {
					width: 300rpx;
					height: 300rpx;
					border-radius: 8rpx;
				}

				.span {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					margin: 12rpx 0;
				}

				.lable {
					width: 260rpx;
					height: 50rpx;
					background-color: #C4C4C4;
					border-radius: 26rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.activeBeforeStart {
		width: 670rpx;
		margin: 0 40rpx;
		margin-top: 30rpx;
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 20rpx;

		.image {
			width: 100%;
			height: 290rpx;
			border-radius: 18rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: 550;
			color: #333333;
			margin-top: 32rpx;
			margin-bottom: 10rpx;
		}

		.beginMinute {
			width: 116rpx;
			height: 46rpx;
			border-radius: 1px;
			border: 1px solid #333333;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.cumulative {
			height: 80rpx;
			background-color: #64B6A8;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;
			font-size: 36rpx;
			font-weight: 550;
			color: #FFFFFF;
			margin-top: 16rpx;
			margin-bottom: 38rpx;
		}

		.description {
			.description_title {
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
				margin-bottom: 12rpx;
			}

			.description_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.binds_frame{
		width: 600rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		.binds_frame_t{
			font-size: 36rpx;
			font-weight: 550;
			color: #000000;
			padding: 0 46rpx;
			padding-top: 36rpx;
		}
		.binds_frame_c{
			width: 500rpx;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: 400;
			color: #64B6A8;
			margin-top: 30rpx;
			margin-bottom: 50rpx;
		}
		.binds_frame_b{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cancel{
				flex: 1;
				height: 90rpx;
				border-radius: 10rpx 0 0 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #000;
				background-color: #F2F2F2;
			}
			.determine{
				flex: 1;
				height: 90rpx;
				border-radius:0 10rpx 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #fff;
				background-color: #64B6A8;
			}
		}
	}
</style>
